<!DOCTYPE html>
<html lang="zh_CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title th:text="${systemName}">管理平台</title>
    <link rel="icon" type="image/x-icon" href="https://static.platform.jwzhu.com/image/icon.ico">

    <link rel="stylesheet" href="https://static.platform.jwzhu.com/font-awesome-4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="https://static.platform.jwzhu.com/css/common.css">
    <link rel="stylesheet" href="https://static.platform.jwzhu.com/css/main.css">
</head>
<body>
<div id="middle" class="main-body">
    <div class="navigate">
        <div class="navigate-user">
            <img id="navigate_user_header" class="navigate-user-header" src="https://static.platform.jwzhu.com/image/icon.ico">
            <div id="navigate_user_name" class="navigate-user-name"><span th:text="${admin.nickname}"></span><a href="/login/logout" class="margin-left-1" style="color: #000000;"><i class="fa fa-sign-out"></i></a></div>
        </div>
        <div id="navigate-menus" class="navigate-menus"></div>
    </div>
    <div id="content" class="content">
        <div class="content-top">
            <ul id="content_top_nav" class="content-top-nav"></ul>
        </div>
    </div>
</div>
</body>
<script src="https://static.platform.jwzhu.com/js/request.js"></script>
<script src="https://static.platform.jwzhu.com/js/common.js"></script>
<script type="text/javascript">
    window.onload = function () {
        queryMenu();
    };

    let queryMenu = function () {
        Request.get({
            url: '/queryMenu',
            showMessage: false,
            success: data => {
                data.forEach(function (item) {
                    let _firstItemHtml = document.createElement('div');
                    _firstItemHtml.classList.add('navigate-menus-item');
                    _firstItemHtml.innerHTML = `<div class="menu-item"><div class="light-line-left"></div><div class="margin-auto margin-left-1">${item.name}</div></div>`;
                    document.getElementById('navigate-menus').appendChild(_firstItemHtml);
                    if (item.children) {
                        addChildren(_firstItemHtml, item.children);
                    }

                    bindMenuClick(_firstItemHtml, item);
                });
            }
        });
    };

    let addChildren = function (_first, children) {
        if (children.length === 0) {
            return;
        }

        let _childrenHtml = document.createElement('div');
        _childrenHtml.classList.add('navigate-menus-item-children');
        _first.appendChild(_childrenHtml);

        children.forEach(function (childrenItem) {
            let _childrenItemHtml = document.createElement('div');
            _childrenItemHtml.classList.add('menu-item');
            _childrenItemHtml.innerHTML = `<div class="margin-auto margin-left-1">${childrenItem.name}</div><div class="light-line-bottom-div"><div class="light-line-bottom"></div></div>`;
            _childrenHtml.appendChild(_childrenItemHtml);
            if (childrenItem.children) {
                addChildren(_childrenItemHtml, childrenItem.children);
            }

            bindMenuClick(_childrenItemHtml, childrenItem);
        });
    };

    let bindMenuClick = function (_itemHtml, item) {
        if (item.type !== 2) {
            return;
        }
        _itemHtml.onclick = function () {
            if (document.querySelectorAll('.content-body').length >= 10) {
                Toast.info('最多打开10个页面');
                return;
            }
            let _activeNav = document.querySelector('.content-top-nav-item.active');
            if (_activeNav) {
                _activeNav.classList.remove('active');
            }
            let _activeContent = document.querySelector('.content-body.active');
            if (_activeContent) {
                _activeContent.classList.remove('active');
            }

            let iFrameId = `menu_content_${item.code.replace(/\./g, '_')}`;
            let navItemId = `content_top_nav_${item.code.replace(/\./g, '_')}`;
            let _iFrameHtml = document.getElementById(iFrameId);
            let _navItemHtml = document.getElementById(navItemId);

            if (!_iFrameHtml) {
                _navItemHtml = document.createElement('li');
                _navItemHtml.id = navItemId;
                _navItemHtml.classList.add('content-top-nav-item');
                _navItemHtml.onclick = navClick;
                _navItemHtml.setAttribute('data-iFrameId', iFrameId);
                _navItemHtml.innerHTML = `${item.name}<div class="close fa fa-times" onclick="navClose()"></div>`;
                document.getElementById('content_top_nav').appendChild(_navItemHtml);

                _iFrameHtml = document.createElement('iframe');
                _iFrameHtml.id = iFrameId;
                _iFrameHtml.classList.add('content-body');
                _iFrameHtml.src = item.url;
                document.getElementById('content').appendChild(_iFrameHtml);
            }

            _iFrameHtml.classList.add('active');
            _navItemHtml.classList.add('active');
        };
    };

    let navClick = function () {
        let _target = window.event.target;
        if (_target.classList.contains('active')) {
            return
        }
        let _activeNav = document.querySelector('.content-top-nav-item.active');
        if (_activeNav) {
            _activeNav.classList.remove('active');
        }
        let _activeContent = document.querySelector('.content-body.active');
        if (_activeContent) {
            _activeContent.classList.remove('active');
        }
        _target.classList.add('active');
        let iFrameId = _target.getAttribute('data-iFrameId');
        document.getElementById(iFrameId).classList.add('active');
    };

    let navClose = function () {
        window.event.stopPropagation();
        let _target = window.event.target;
        let _navItemHtml = _target.parentElement;
        let iFrameId = _navItemHtml.getAttribute('data-iFrameId');
        let _iFrameHtml = document.getElementById(iFrameId);
        _navItemHtml.remove();
        _iFrameHtml.remove();

        let nextActiveNavItemHtml = document.querySelector(`#${_navItemHtml.id}+li`);
        nextActiveNavItemHtml = nextActiveNavItemHtml == null ? document.querySelector('#content_top_nav :first-child') : nextActiveNavItemHtml;
        if (nextActiveNavItemHtml != null) {
            let nextActiveIFrameHtml = document.getElementById(nextActiveNavItemHtml.getAttribute('data-iFrameId'));
            nextActiveIFrameHtml.classList.add('active');
            nextActiveNavItemHtml.classList.add('active');
        }
    }

</script>
</html>